<template>
  <el-card shadow="never">
    <el-tabs v-model="activeTab" @tab-click="handTabClick">
      <el-tab-pane label="基础信息" name="base">
        <BaseInfoTab :form="form" @formChange="formChange" @cateIdChange="cateIdChange" @videoChange="videoChange"/>
      </el-tab-pane>
      <el-tab-pane label="规格库存" name="spec">
        <SpecStockTab :form="form" @formChange="formChange" />
      </el-tab-pane>
      <el-tab-pane label="商品详情" name="detail">
        <DetailTab :form="form" @formChange="formChange" />
      </el-tab-pane>
      <el-tab-pane label="物流设置" name="logistics">
        <LogisticsTab :form="form" @formChange="formChange" />
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>

  import BaseInfoTab from './tabs/BaseInfoTab.vue'
  import SpecStockTab from './tabs/SpecStockTab.vue'
  import DetailTab from './tabs/DetailTab.vue'
  import LogisticsTab from './tabs/LogisticsTab.vue'


  export default {
    components: {
      BaseInfoTab,
      SpecStockTab,
      DetailTab,
      LogisticsTab,

    },
    data() {
      return {
        activeTab: 'base',
        form: {
          sid:0,
          product_type: 0,
          // 基础字段
          isend_base: true,
          isend_spec:true,
          isend_detail: false,
          store_name: '',
          unit: '',
          weight: 0,
          image: '',
          slider_image: '',
          video_link: '',
          cate_id: '',
          is_up: 1,
          // 规格库存
          spec_type: 0,
          stock: 0,
          market_price: 0,
          // 商品详情
          details: '',
          // 物流设置
          is_postage: 1,
          postage: 0,
          logistics: '1,2',
          freight: 2,
          temp_id: 1,
          price: 0,
          commission: 0,
          sku_object: {},
          specs_data:[],
          sku_data:null

        }
      }
    },
    created(){


    },
    mounted() {
      this.initData();
    },
    methods: {
      initData(){
        const id = this.$route.query?.id;
        if(id){
          this.$httpRequest.get('/product/detail', {id:id}).then(result => {
            console.log('----detail----', result);
            if(result.code === 0){
              this.form=result.data
              this.form.isend_base=true;
              this.form.isend_spec=true;
              this.form.isend_detail=true;
              this.form.sid = this.form.sid*1
              this.form.cate_id = this.form.cate_id*1
              //this.form.specs_data =  this.$reverseTransformData(this.form.sku_object.specs)
              this.form.specs_data =  this.form.sku_object.specs
              this.form.sku_data = this.form.sku_object.skus


              this.form.sku_object = {
                specs:this.form.specs_data,
                skus:this.form.sku_data
              }
              console.log('---- this.form---',this.form);
            }
          }).catch(e => {
            this.$message.error(e.message)
            });
        }
      },
      videoChange(data){
        console.log('--收到视频更改---', data.url)
        this.form.video_link = data.url
      },
      cateIdChange(data) {
        this.form.cate_id = data
        console.log('***form', this.form)
      },
      formChange(data) {
        this.form = {
          ...this.form,
          ...data.form
        };
        console.log('self----data', this.form)
        if (data.sign == '1' && this.form.isend_base) {
          this.activeTab = "spec";
        }
        if (data.sign == '2' && this.form.isend_spec) {
          this.activeTab = "detail";
        }
        console.log('--收到数据改变-----', data);
      },
      handTabClick(data) {
        console.log('----tab切换----：', data)
        let index = data.index * 1
        console.log('--收到数据改变--index---', index);

      },


    }
  }
</script>

<style scoped>
  .footer-btns {
    text-align: right;
    margin-top: 30px;
  }

  /deep/ .el-tabs__item {
    font-size: 16px !important;
  }
</style>
